import React, {Component} from 'react'
import {notLogin, post} from '../../common/js/utils'
import {Form, Popover, Input, Button} from 'antd'
import {connect} from 'react-redux'
import propTypes from 'prop-types'
import {Emoji, selectText} from './emoji'
import {withRouter} from 'react-router-dom'

function mapStateToProps(state, props) {
  return {
    userInfo: state.get('userInfo')
  }
}

@Form.create()
@connect(mapStateToProps)
@withRouter
class ReplyForm extends Component {

  state = {
    visible: false,
    loading: false
  }

  handleVisibleChange = (visible) => {
    this.setState({visible})
  }

  onSelect = (emoji) => {
    const {getFieldValue, setFieldsValue} = this.props.form
    const input = document.getElementById('comment')
    const content = getFieldValue('comment') || ''
    setFieldsValue({
      comment: selectText(input, content, emoji)
    })
  }

  onSubmit = (e) => {
    e.preventDefault()
    const {userInfo, form, comment, reply, onSuccess} = this.props
    if (userInfo.get('status') !== 1) {
      notLogin()
      return
    }
    const content = form.getFieldValue('comment')
    if (!content) return
    post('/api/reply/add', {
      commentId: comment._id,
      content,
      replyAt: reply ? reply._id : null
    }, loading => {
      this.setState({loading})
    }).then(res => {
      if (res.result === 1) {
        form.resetFields()
        onSuccess(Object.assign(res.data, {
          createdBy: userInfo.toJS(),
          at: reply ? reply : null,
          replyTo: reply ? reply.createdBy : comment.createdBy,
          good_count: 0
        }))
        this.setState({visible: false})
      }
    })
  }

  render() {
    const {reply, comment} = this.props
    const {nickname} = reply ? reply.createdBy : comment.createdBy
    const {getFieldDecorator} = this.props.form
    return (
      <Popover title={`回复“${nickname}”`} placement="bottom" onVisibleChange={this.handleVisibleChange} trigger="click" visible={this.state.visible} content={
        <Form onSubmit={this.onSubmit}>
          <Form.Item style={{
            marginBottom: 0
          }}>
            {
              getFieldDecorator('comment')(
                <Input.TextArea placeholder={`回复${nickname}`} style={{
                  width: 300,
                  height: 80
                }} />
              )
            }
          </Form.Item>
          <Form.Item style={{
            marginBottom: 0
          }}>
            <Emoji
              onSelect={this.onSelect}
              placement="top"
              style={{
                color: '#faad14'
              }}
            />
            <Button
              style={{
                float: 'right',
                margin: '7px 0'
              }}
              type="primary"
              size="small"
              htmlType="submit"
              loading={this.state.loading}
            >回复</Button>
          </Form.Item>
        </Form>
      } >
        {this.props.children}
      </Popover>
    )
  }
}

ReplyForm.propTypes = {
  reply: propTypes.object,
  comment: propTypes.object.isRequired
}

export {ReplyForm}
